import type { BingElements } from '../../../../../../../../types/constants/personalization/bing'
import { ThemeVarService } from '../../../../../../../../lib/abstract/style/theme_var/service'
import { PageHandler } from '../../../../../../../../lib/page_handler'
import {
  BING_SEARCH_PAGE_SELECTORS,
  BingPageType,
} from '../../../../../../../../lib/page_handler/platform/bing/types'
import {
  AppStyleCollections,
  generateHideSelector,
  PAGE_ELEMENTS,
  SUPPORTED_PLATFORMS,
} from '../../../../../../../../types/constants'
import { SearchCommonStyles } from '../../common'

export class BingCommonPage {
  elements: BingElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.BING]
  private static instance: BingCommonPage
  private readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()
  private readonly searchCommonStyles: SearchCommonStyles = SearchCommonStyles.getInstance()
  private readonly pageHandler: PageHandler = PageHandler.getInstance()
  private pageType: BingPageType | 'default' = this.pageHandler.pages.bing.pageType

  /**
   * 获取单例实例
   */
  public static getInstance(): BingCommonPage {
    if (!BingCommonPage.instance) {
      BingCommonPage.instance = new BingCommonPage()
    }
    return BingCommonPage.instance
  }

  init(): void {
    const supportPages = [
      BingPageType.Index,
      BingPageType.Web,
      BingPageType.Video,
      BingPageType.Academic,
      BingPageType.Dictionary,
    ]

    if (supportPages.includes(this.pageType as BingPageType)) {
      const config = BING_SEARCH_PAGE_SELECTORS[this.pageType as BingPageType]

      if (!config)
        return

      this.searchCommonStyles.bindInputEvent(config)
    }
  }

  headerStyles(): string {
    return `
      background: var(${this.themeVarService.search.header.background}) !important;
      padding: 16px 0 0 0 !important;
    `
  }

  switchBaseStyles(): string {
    return `
      #est_switch {
        #est_cn, #est_en {
          &::after {
            border: none !important;
          }
          
          &.est_selected {
            color: white !important;
            
            &::after {
              background-color: var(${this.themeVarService.message.success.textPrimary}) !important;
            }
          }
          
          &.est_unselected {
            text-shadow: none !important;
            
            &:hover {
              color: var(${this.themeVarService.link.default.text}) !important;
            }
            
            &::after {
              background-color: white !important;
            }
          }
        }
      }
    `
  }

  switchStyles(): string {
    return `
      /* 区域切换 */
      #est_switch {
        position: absolute !important;
        left: 16px !important;
        top: 24px !important;
        margin-left: 0 !important;
        height: fit-content !important;
      }
      ${this.switchBaseStyles()}
    `
  }

  searchBoxStyles(): string {
    return `
      /* 搜索框 */
      #sb_form {
        display: flex !important;
        justify-content: center !important;
        
        .b_searchboxForm {
          display: flex !important;
          position: relative !important;
          
          /* 下拉框菜单 */
          #sw_as {
            position: absolute !important;
            top: 100% !important;
            width: 100% !important;
          }
        }
      }
    `
  }

  searchTabStyles(): string {
    return `
      /* 搜索分类 */
      nav[role="navigation"] {
        display: flex !important;
        justify-content: center !important;
        margin: 0 !important;
        background-color: var(${this.themeVarService.search.header.background}) !important;
        
        ${this.searchCommonStyles.searchTabStyles({
          container: 'ul:not(.b_sp_over_menu)',
          selector: 'li:not(#b-scopeListItem-menu, #scope_tools_wrapper.active)',
          activeClass: 'b_active',
        })}
        
        ul {
          &:not(.b_sp_over_menu) {
            li {
              &#b-scopeListItem-menu > a {
                color: var(${this.themeVarService.tab.text}) !important;
                font-size: ${this.themeVarService.tab.fontSize} !important;
                
                &:hover {
                  color: var(${this.themeVarService.tab.textHover}) !important;
                }
              }
            }
          }
          
          li {
            &#scope_tools_wrapper.active > a {
              font-size: ${this.themeVarService.tab.fontSize} !important;
            }
            
            &#b-scopeListItem-menu {
              .b_sp_over_menu {
                > li a {
                  font-size: ${this.themeVarService.tab.fontSize} !important;
                }
              }
            }
          }
        }
        
        /* 筛选器 */
        #fltIdt {
          #fltIdtLnk {
            &:hover, &[aria-expanded="true"] {
              #fltIdtTit {
                color: var(${this.themeVarService.link.default.text}) !important;
              }
            }

            #fltIdtTit {
              color: var(${this.themeVarService.search.default.text}) !important;
            }
          }
        }
      }
    `
  }

  userCenterStyles(): string {
    return `
      /* 用户中心 */
      #id_h {
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
        float: unset !important;
        
        span {
          color: var(${this.themeVarService.search.default.text}) !important;
        }
      }
    `
  }

  filterStyles(): string {
    return `
    /* 内容过滤 */
    #ftr_pane {
      background-color: transparent !important;
      
      div[role="navigation"] {
        background-color: transparent !important;
        
        ul {
          li {
            /* 过滤分类 */
            > span {
              background: transparent !important;
              
              &[aria-expanded="true"], &:hover {
                background: #eee !important;
                
                > span {
                  color: var(${this.themeVarService.search.default.textBase}) !important;
                }
              }

              > span {
                color: var(${this.themeVarService.search.default.text}) !important;
              }
            }
            
            a.ftrClr {
              color: var(${this.themeVarService.link.default.text}) !important;

              &:hover {
                color: var(${this.themeVarService.link.default.textHover}) !important;
                text-decoration: none !important;
              }
            }
          }
        }
      }
    }
    
    /* 筛选器 */
    #b_tween_searchTools {
      display: inline-block !important;

      a[role="button"] {
        background-color: transparent !important;
        color: var(${this.themeVarService.search.default.text}) !important;
        
        &:hover {
          color: var(${this.themeVarService.link.default.text}) !important;
          background-color: transparent !important;
        }
        
        &.b_selected {
          color: var(${this.themeVarService.link.default.text}) !important;
        }
      }
    }
    `
  }

  pageBarStyles(): string {
    const supportPages = [
      BingPageType.Web,
      BingPageType.Academic,
      BingPageType.Dictionary,
    ]

    return !supportPages.includes(this.pageType as BingPageType)
      ? ''
      : `
    .b_pag [role="navigation"], .b_pag:has(> ul) {
      ul {
        li {
          a {
            color: var(${this.themeVarService.pageBar.otherPage.text}) !important;
            background-color: var(${this.themeVarService.pageBar.otherPage.bg}) !important;
            border: ${this.themeVarService.pageBar.default.border} !important;
            border-color: var(${this.themeVarService.pageBar.otherPage.bg}) !important;
            border-radius: ${this.themeVarService.pageBar.default.borderRadius} !important;
            font-size: ${this.themeVarService.pageBar.default.fontSize} !important;
            min-width: ${this.themeVarService.pageBar.default.height} !important;
            height: ${this.themeVarService.pageBar.default.height} !important;
            line-height: ${this.themeVarService.pageBar.default.height} !important;
            
            &:hover {
              color: var(${this.themeVarService.pageBar.otherPage.textHover}) !important;
              background-color: var(${this.themeVarService.pageBar.otherPage.bgHover}) !important;
              border-color: var(${this.themeVarService.pageBar.otherPage.bgHover}) !important;
            }
            
            &.sb_bp {
              margin-right: ${this.themeVarService.pageBar.default.gap} !important;
              border-bottom: none !important;
            }
            
            &.sb_pagS {
              color: var(${this.themeVarService.pageBar.currentPage.text}) !important;
              background-color: var(${this.themeVarService.pageBar.currentPage.bg}) !important;
              border-color: var(${this.themeVarService.pageBar.currentPage.bg}) !important;
            }
            
            &.sb_pagN {
              padding: 0 10px !important;

              &:after {
                content: "下一页";
                transform: none !important;
                white-space: nowrap !important;
              }
            }
          }
        }
      }
    }
    `
  }

  footerStyles(): string {
    return `
      #b_footer {
        background-color: transparent !important;
        display: flex !important;
        justify-content: center !important;
        
        #b_footerItems {
          padding: 0 24px;
          display: flex !important;
        }
        
        span {
          color: var(${this.themeVarService.search.default.text}) !important;
        }
        
        a {
          color: var(${this.themeVarService.link.default.text}) !important;
          
          &:hover {
            color: var(${this.themeVarService.link.default.textHover}) !important;
            text-decoration: none !important;
          }
        }
      }
    `
  }

  hideSearchStyles(): string {
    return `
    .b_searchboxForm {
      border-radius: 24px !important;
      width: 650px !important;
    }
    
    #sw_as {
      display: none !important;
    }
    `
  }

  getMainStyles(): string {
    const supportPages = [
      BingPageType.Web,
      BingPageType.Video,
      BingPageType.Academic,
      BingPageType.Dictionary,
    ]

    return !supportPages.includes(this.pageType as BingPageType)
      ? ''
      : `
  /* 搜索历史隐藏、搜索建议隐藏 */
  &[${AppStyleCollections.Search.attr.HIDE_HISTORY}="true"][${AppStyleCollections.Search.attr.HIDE_SUGGESTIONS}="true"] {
    form#sb_form {
      ${this.hideSearchStyles()}
    }
  }
  /* 搜索历史隐藏、搜索建议显示 */
  &[${AppStyleCollections.Search.attr.HIDE_HISTORY}="true"]:not([${AppStyleCollections.Search.attr.HIDE_SUGGESTIONS}]) {
    /* 无搜索建议 */
    form#sb_form[${AppStyleCollections.Search.attr.IS_SUGGESTIONS_EMPTY}="true"] {
      ${this.hideSearchStyles()}
    }
  }
  /* 搜索历史显示、搜索建议隐藏 */
  &:not([${AppStyleCollections.Search.attr.HIDE_HISTORY}])[${AppStyleCollections.Search.attr.HIDE_SUGGESTIONS}="true"] {
    /* 无搜索历史 */
    form#sb_form[${AppStyleCollections.Search.attr.IS_HISTORY_EMPTY}="true"] {
      ${this.hideSearchStyles()}
    }
  }
  
  /* 顶部菜单 */
  #b_header {
    ${this.headerStyles()}
    ${this.switchStyles()}
    ${this.searchBoxStyles()}
    ${this.searchTabStyles()}
    ${this.userCenterStyles()}
  }
  #b_header:has(${generateHideSelector('nav[role="navigation"]')}) {
    padding-bottom: 16px !important;
  }
  
  /* 主内容 */
  #b_content {
    ${this.filterStyles()}
  }
  
  /* 分页 */
  ${this.pageBarStyles()}
  
  /* 页脚 */
  ${this.footerStyles()}
  
  strong {
    color: var(${this.themeVarService.em.text}) !important;
    background-color: transparent !important;
  }
  
  /* 搜索建议 */
  #sa_sug_block {
    strong {
      color: var(${this.themeVarService.search.suggestions.text}) !important;
    }
  }
  
  /* 大家还在搜 */
  .rslist {
    a {
      text-decoration: none !important;
      
      &:hover {
        .b_suggestionText {
          color: var(${this.themeVarService.link.default.text}) !important;
          
          strong {
            color: var(${this.themeVarService.link.default.text}) !important;
          }
        }
      }
      
      .b_suggestionText {
        color: var(${this.themeVarService.search.default.textBase}) !important;
        
        strong {
          color: var(${this.themeVarService.search.default.textBase}) !important;
        }
      }
    }
  }
    `
  }
}
